<template>
  <a-layout-sider width="200" style="background: #fff">
    <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        :style="{ height: '100%', borderRight: 0 }"
    >
      <a-menu-item key="/home">
        <router-link to="/home">
          <CoffeeOutlined/> &nbsp; 欢迎
        </router-link>
      </a-menu-item>
<!--      <a-menu-item key="/index">-->
<!--        <router-link to="/index">-->
<!--          <UserOutlined /> &nbsp; 个人信息-->
<!--        </router-link>-->
<!--      </a-menu-item>-->
<!--      <a-menu-item key="/main">-->
<!--        <router-link to="/main">-->
<!--          <UserOutlined /> &nbsp; 我的食谱-->
<!--        </router-link>-->
<!--      </a-menu-item>-->
<!--      <a-menu-item key="/recipelist">-->
<!--        <router-link to="/recipelist">-->
<!--          <UserOutlined /> &nbsp; 我的收藏-->
<!--        </router-link>-->
<!--      </a-menu-item>-->
<!--      <a-menu-item key="/about">-->
<!--        <router-link to="/about">-->
<!--          <UserOutlined /> &nbsp; 我的关注-->
<!--        </router-link>-->
<!--      </a-menu-item>-->
    </a-menu>
  </a-layout-sider>
</template>
<script setup>
import {ref, watch} from "vue";
import router from "@/router";
const selectedKeys = ref([]);
const openKeys = ref(['sub1']);
watch (() => router.currentRoute.value.path, (newValue) => {
  // console.log('watch',newValue);
  selectedKeys.value=[];
  selectedKeys.value.push(newValue);
},{immediate:true} )
</script>

<style scoped>

</style>